<template>
  <!--稿件评估-->
  <div>
    <carousel :autoplaySpeed="autoplaySpeed" :Img="Img"></carousel>
    <div class="wrapper">
      <Row :gutter="16">
        <i-col span="6">
          <ngn :data="data" :activeIndex="activeIndex"></ngn>
        </i-col>
        <i-col span="18">
          <div class="com">
            <p class="p">
              <Icon type="ios-pin"/>
              <span>您现在的位置是:</span><span class="span">{{data.title}}</span><span> > </span><span
              class="span">稿件评估</span>
            </p>
            <div class="step">
              <div style="display: inline-block;height: 170px;" v-for="step in step1">
                <div class="li">
                  <img :src="step.img1" alt="">
                  <div class="explain">
                    <h1>{{step.index}}</h1>
                    <span>{{step.list}}</span>
                  </div>
                </div>
                <img style="position: relative;top: -150px;transform: rotate(25deg);" :src="step.img2">
              </div>

              <div style="text-align: center">
                <p style="padding-bottom: 10px;font-size: 12px;color: #999">用户在登录后，填写稿件基本信息以及投稿意向，系统会综合投稿内容、影响因子、学术分类等多个影响因素，</p>
                <p style="padding-bottom: 10px;font-size: 12px;color: #999">为用户匹配适合投稿期刊，并给出推荐理由和建议。</p>
                <p style="padding-bottom: 10px;font-size: 12px;color: #999">为用户投稿快速、准确选择期刊提供帮助，节省期刊选择查找时间。</p>
              </div>

              <div style="text-align: center">
                  <!--我要评估-->
                  <router-link to="/assess" style="color: #fff">
                    <Button type="primary">我要评估</button>
                  </router-link>
              </div>
            </div>
          </div>
        </i-col>
      </Row>
    </div>
  </div>
</template>

<script>
  import carousel from '../module/carousel'
  import ngn from '../module/ngn'

  export default {
    components: {
      carousel, ngn
    },
    data() {
      return {
        activeIndex: 2,
        autoplaySpeed: 100000,
        Img: [
          {
            id: 1,
            imageLocation: require('../../assets/img/u69.jpg'),
            state: true,
            uri: "",
          },
        ],
        data: {
          title: '论文投稿',
          list: [
            {list: '投稿流程', link: 'contributeProcess'},
            {list: '投稿指南', link: 'contributeGuide'},
            {list: '投稿评估', link: 'manuscriptEvaluation'},
            // {list: '线上课程', link: 'onlineCourses'},

            {list: '文献格式校验', link: 'DocumentFormatCheck',},
            {list: '错别字校对', link: 'ProofreadForTypos',},
            {list: '论文创新指数', link: 'ManuscriptInnovationIndex',},
          ],
        },
        step1: [
          {index: '1', list: '填写稿件信息', img1: require('../../assets/img/u3605.jpg'),img2: require('../../assets/img/u3609.png')},
          {index: '2', list: '选择投稿意向', img1: require('../../assets/img/u3606.jpg'),img2: require('../../assets/img/u3609.png')},
          {index: '3', list: '智能匹配期刊', img1: require('../../assets/img/u3607.jpg'),img2: require('../../assets/img/u3609.png')},
          {index: '4', list: '快速发表稿件', img1: require('../../assets/img/u3608.jpg'),img2: ""},
        ],
      }
    },
    methods: {
    },
  }
</script>

<style scoped>
  .com {
    padding-bottom: 20px;
  }

  .com .p {
    padding: 10px 0;
    font-size: 16px;
    font-weight: bold;
    border-bottom: 1px solid #000;
  }

  .com .step {
    padding: 40px 5px;
  }

  .span {
    padding: 0 10px;
  }

  .com .step .li {
    display: inline-block;
    width: 150px;
    height: 150px
  }

  .com .step .li .explain {
    text-align: center;
    position: relative;
    top: -120px;
  }

  .com .step .li .explain > h1 {
    font-weight: bold;
    font-style: normal;
    color: #2A35A1
  }

  .com .step .li .explain > span {
    font-weight: bold;
    font-style: normal;
    font-size: 18px;
    color: #999999;
  }
</style>
